<div class="conatiner">

  <ul nz-menu nzMode="horizontal">
    <li nz-menu-item nzSelected>
      <i nz-icon nzType="home"></i>
      Home
    </li>
    <li nz-submenu nzTitle="Settings" nzIcon="setting">
      <ul>
        <li nz-menu-group nzTitle="">
          <ul>
            <li nz-menu-item (click)="changePassword()">Change Password</li>
          </ul>
        </li>

      </ul>
    </li>
    <li nz-menu-item>
      <i nz-icon nzType="logout"></i>
      Logout
      <a href="#" ></a>
    </li>
  </ul>

  <!-- Change Password Modal -->

  <nz-modal
      [(nzVisible)]="isVisible2"
      nzTitle="Change Password"
      (nzOnCancel)="handleCancel2()"
      (nzOnOk)="handleOk2()"
      [nzOkLoading]="isOkLoading2"
    >
      <div *nzModalContent>





      </div>
    </nz-modal>





    <!-- Table & Button-->

<app-addstudents></app-addstudents>

<nz-table #basicTable class="studentsTable" >
  <thead>
    <tr>
      <th>First Name</th>
      <th>Surname</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of StudentsData">
      <td>{{ data.firstname }}</td>
      <td>{{ data.lastname }}</td>
      <td>{{ data.age }}</td>
      <td>{{ data.gender }}</td>
      <td>

       <app-editstudents></app-editstudents>

        <nz-divider nzType="vertical"></nz-divider>

        <app-deletestudents></app-deletestudents>


      </td>
    </tr>
  </tbody>
</nz-table>


</div>

